<template>
  <div class="main01">
    <basic-layout title="健康分析" backBtnType="arrow" :showAddBtn="false" class="wrapBox">

      <div class="body_box">
        <div class="main">

          <div style=" font-weight: bold;margin: 5px 10px;">基本信息</div>
          <div>
            <div class="fContentMain firstClass" >
              <div class="contentC">
<!--                <div class="box-title">基本信息</div>-->
                <div>
                  <div class="title">
                    <div>三级单位</div>
                    <div v-if="detailDate.rvBaseEmployee">{{ detailDate.rvBaseEmployee.sjdw }}</div>
                  </div>
                  <div class="title">
                    <div>四级单位</div>
                    <div v-if="detailDate.rvBaseEmployee">{{ detailDate.rvBaseEmployee.fjdw }}</div>
                  </div>
                  <div class="title">
                    <div>部门名称</div>
                    <div v-if="detailDate.rvBaseEmployee">{{ detailDate.rvBaseEmployee.bmmc }}</div>
                  </div>
                  <div class="title">
                    <div>姓名</div>
                    <div v-if="detailDate.rvBaseEmployee">{{ detailDate.rvBaseEmployee.name }}</div>
                  </div>
                  <div class="title">
                    <div>性别</div>
                    <div v-if="detailDate.rvBaseEmployee">{{ detailDate.rvBaseEmployee.sex }}</div>
                  </div>
                  <div class="title">
                    <div>年龄</div>
                    <div>{{ detailDate.age }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div style=" font-weight: bold;margin: 5px 10px;">体检记录</div>
          <div class="fContentMain secondClass">
            <div class="contentA">
              <div class="title" style="color: #878888;">
                <div style=" text-align: left;width: 20%">年龄</div>
                <div style=" text-align: left;width: 40%">体检机构</div>
                <div style=" text-align: left;width: 40%">体检日期</div>
              </div>
              <div  v-for="(item,index) in organizationsList" :key="index" style="width: 100%">
                <div class="title" >
                  <div style=" text-align: left;width: 20%">{{item.age}}</div>
                  <div style=" text-align: left;width: 40%">{{item.name}}</div>
                  <div style=" text-align: left;width: 40%">{{item.date}}</div>
                </div>

              </div>

            </div>
          </div>

          <div style=" font-weight: bold;margin: 5px 10px;">健康指标监测</div>
          <div class="fContentMain secondClass">
            <div class="contentA">

              <div id="mychart1" style="width: 100%; height: 400px"></div>

            </div>
          </div>

          <div class="fContentMain secondClass">
            <div class="contentA">

              <div id="mychart2" style="width: 100%; height: 400px"></div>

            </div>
          </div>

          <div class="fContentMain secondClass">
            <div class="contentA">

              <div id="mychart4" style="width: 100%; height: 400px"></div>

            </div>
          </div>

          <div class="fContentMain secondClass">
            <div class="contentA">

              <div id="mychart5" style="width: 100%; height: 400px"></div>

            </div>
          </div>

          <div class="fContentMain secondClass">
            <div class="contentA">

              <div id="mychart6" style="width: 100%; height: 400px"></div>

            </div>
          </div>

          <div class="fContentMain secondClass">
            <div class="contentA">

              <div id="mychart3" style="width: 100%; height: 400px"></div>

            </div>
          </div>

        </div>

      </div>
    </basic-layout>

    <full-loading v-if="loading"></full-loading>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { getIllnessByUserId } from '@/api/realAssets/rvhealth/illness';

export default {
  name: 'illustrationDetail',
  props: {},
  components: {},
  data() {
    return {
      loading: false,

      // 体检结果数据
      illnessList: [],
      //体检结果信息
      detailDate: {},

      //体检记录
      organizationsList: [],

      //==============================一般检查================================
      //图像数据
      imageData1: {
        date: [],
        height: [],
        weight: [],
        weightBmi: [],
        systolicPressure: [],
        diastolicPressure: []
      },
      //==============================尿酸检查================================
      //图像数据
      imageData2: {
        date: [],
        uricAcid: []
      },
      //==============================心梗检查================================
      //图像数据
      imageData3: {
        date: [],
        creatineKinase: []
      },
      //==============================血糖检查================================
      //图像数据
      imageData4: {
        date: [],
        bloodSugar: []
      },
      //==============================血脂检查================================
      imageData5: {
        date: [],
        totalCholesterol: [],
        triglycerides: [],
        ldlCholesterol: [],
        hdlCholesterol: []
      },
      //==============================肿瘤检查================================
      imageData6: {
        date: [],
        cea: [],
        afp: [],
      },

    }
  },

  created() {
    //根据informId查询体检结果
    this.getIllness();
  },
  computed: {},

  methods: {

    // 根据userId查询体检结果
    getIllness() {
      //根据userId查询体检结果
      getIllnessByUserId({userId: JSON.parse(sessionStorage.getItem("userInfo")).userId}).then(response => {
        //体检结果数据
        this.illnessList = response.data.data

        //体检结果
        this.detailDate = response.data.data[0];

        //体检记录
        this.organizationsList = []
        for(var i=0;i<this.illnessList.length;i++){
          this.organizationsList.push({
            age: this.illnessList[i].age,
            name: this.illnessList[i].rvHealthOrganizations.name,
            date: this.illnessList[i].date
          });
        }

        //一般检查,尿酸检查,心梗检查,血糖检查,血脂检查,肿瘤检查
        //一般检查
        this.imageData1.date = [];
        this.imageData1.height = [];
        this.imageData1.weight = [];
        this.imageData1.weightBmi = [];
        this.imageData1.systolicPressure = [];
        this.imageData1.diastolicPressure = [];

        //尿酸检查
        this.imageData2.date = [];
        this.imageData2.uricAcid = [];

        //心梗检查
        this.imageData3.date = [];
        this.imageData3.creatineKinase = [];

        //血糖检查
        this.imageData4.date = [];
        this.imageData4.bloodSugar = [];

        //血脂检查
        this.imageData5.date = [];
        this.imageData5.totalCholesterol = [];
        this.imageData5.triglycerides = [];
        this.imageData5.ldlCholesterol = [];
        this.imageData5.hdlCholesterol = [];

        //肿瘤检查
        this.imageData6.date = [];
        this.imageData6.cea = [];
        this.imageData6.afp = [];

        for (let i=this.illnessList.length-1;i>=0;i--){

          //一般检查
          this.imageData1.date.push(this.illnessList[i].date);
          this.imageData1.height.push(this.illnessList[i].height);
          this.imageData1.weight.push(this.illnessList[i].weight);
          this.imageData1.weightBmi.push(this.illnessList[i].weightBmi);
          this.imageData1.systolicPressure.push(this.illnessList[i].systolicPressure);
          this.imageData1.diastolicPressure.push(this.illnessList[i].diastolicPressure);

          //尿酸检查
          this.imageData2.date.push(this.illnessList[i].date);
          this.imageData2.uricAcid.push(this.illnessList[i].uricAcid);

          //心梗检查
          this.imageData3.date.push(this.illnessList[i].date);
          this.imageData3.creatineKinase.push(this.illnessList[i].creatineKinase);

          //血糖检查
          this.imageData4.date.push(this.illnessList[i].date);
          this.imageData4.bloodSugar.push(this.illnessList[i].bloodSugar);

          //血脂检查
          this.imageData5.date.push(this.illnessList[i].date);
          this.imageData5.totalCholesterol.push(this.illnessList[i].totalCholesterol);
          this.imageData5.triglycerides.push(this.illnessList[i].triglycerides);
          this.imageData5.ldlCholesterol.push(this.illnessList[i].ldlCholesterol);
          this.imageData5.hdlCholesterol.push(this.illnessList[i].hdlCholesterol);

          //肿瘤检查
          this.imageData6.date.push(this.illnessList[i].date);
          this.imageData6.cea.push(this.illnessList[i].cea);
          this.imageData6.afp.push(this.illnessList[i].afp);
        }

        //一般检查
        this.images1();
        //尿酸检查
        this.images2();
        //心梗检查
        this.images3();
        //血糖检查
        this.images4();
        //血脂检查
        this.images5();
        //肿瘤检查
        this.images6();

      });
    },

    //一般检查
    images1(){
      var chartDom = document.getElementById('mychart1');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          left: 'center',
          text: '一般检查'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          orient: 'horizontal', // 设置图例为水平方向
          bottom: '2%', // 图例距离底部的位置
          left: 'center', // 图例水平居中
          data: ['身高(cm)', '体重(kg)', '体重指数BMI', '收缩压', '舒张压']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '20%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: { show: false }
          }
        },
        xAxis: {
          type: 'category',
          data: this.imageData1.date
        },
        yAxis:{
          type: 'value',
        },
        series: [
          {
            name: '身高(cm)',
            type: 'line',
            data:  this.imageData1.height
          },
          {
            name: '体重(kg)',
            type: 'line',
            data: this.imageData1.weight
          },
          {
            name: '体重指数BMI',
            type: 'line',
            data: this.imageData1.weightBmi
          },
          {
            name: '收缩压',
            type: 'line',
            data: this.imageData1.systolicPressure
          },
          {
            name: '舒张压',
            type: 'line',
            data: this.imageData1.diastolicPressure
          },

        ]
      };

      option && myChart.setOption(option);
    },
    //尿酸检查
    images2(){
      var chartDom = document.getElementById('mychart2');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          left: 'center',
          text: "尿酸检查"
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          orient: 'horizontal', // 设置图例为水平方向
          bottom: '2%', // 图例距离底部的位置
          left: 'center', // 图例水平居中
          data: ['尿酸']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '20%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: { show: false }
          }
        },
        xAxis: {
          type: 'category',
          data: this.imageData2.date
        },
        yAxis:{
          type: 'value',
        },
        series: [
          {
            name: '尿酸',
            type: 'line',
            data:  this.imageData2.uricAcid
          }

        ]
      };

      option && myChart.setOption(option);
    },
    //心梗检查
    images3(){
      var chartDom = document.getElementById('mychart3');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          left: 'center',
          text: "心梗检查"
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          orient: 'horizontal', // 设置图例为水平方向
          bottom: '2%', // 图例距离底部的位置
          left: 'center', // 图例水平居中
          data: ['肌酸激酶']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '20%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: { show: false }
          }
        },
        xAxis: {
          type: 'category',
          data: this.imageData3.date
        },
        yAxis:{
          type: 'value',
        },
        series: [
          {
            name: '肌酸激酶',
            type: 'line',
            data:  this.imageData3.creatineKinase
          }

        ]
      };

      option && myChart.setOption(option);
    },
    //血糖检查
    images4(){
      var chartDom = document.getElementById('mychart4');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          left: 'center',
          text: "血糖检查"
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          orient: 'horizontal', // 设置图例为水平方向
          bottom: '2%', // 图例距离底部的位置
          left: 'center', // 图例水平居中
          data: ['血糖']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '20%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: { show: false }
          }
        },
        xAxis: {
          type: 'category',
          data: this.imageData4.date
        },
        yAxis:{
          type: 'value',
        },
        series: [
          {
            name: '血糖',
            type: 'line',
            data:  this.imageData4.bloodSugar
          }

        ]
      };

      option && myChart.setOption(option);
    },
    //血脂检查
    images5(){
      var chartDom = document.getElementById('mychart5');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          left: 'center',
          text: "血脂检查"
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          orient: 'horizontal', // 设置图例为水平方向
          bottom: '2%', // 图例距离底部的位置
          left: 'center', // 图例水平居中
          data: ['总胆固醇','甘油三酯','低密度脂蛋白','高密度脂蛋白']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '20%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: { show: false }
          }
        },
        xAxis: {
          type: 'category',
          data: this.imageData5.date
        },
        yAxis:{
          type: 'value',
        },
        series: [
          {
            name: '总胆固醇',
            type: 'line',
            data:  this.imageData5.totalCholesterol
          },
          {
            name: '甘油三酯',
            type: 'line',
            data:  this.imageData5.triglycerides
          },
          {
            name: '低密度脂蛋白',
            type: 'line',
            data:  this.imageData5.ldlCholesterol
          },
          {
            name: '高密度脂蛋白',
            type: 'line',
            data:  this.imageData5.hdlCholesterol
          }
        ]
      };

      option && myChart.setOption(option);
    },
    //肿瘤检查
    images6(){
      var chartDom = document.getElementById('mychart6');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          left: 'center',
          text: "肿瘤检查"
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          orient: 'horizontal', // 设置图例为水平方向
          bottom: '2%', // 图例距离底部的位置
          left: 'center', // 图例水平居中
          data: ['癌胚抗原CEA','甲胎蛋白AFP']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '20%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: { show: false }
          }
        },
        xAxis: {
          type: 'category',
          data: this.imageData6.date
        },
        yAxis:{
          type: 'value',
        },
        series: [
          {
            name: '癌胚抗原CEA',
            type: 'line',
            data:  this.imageData6.cea
          },
          {
            name: '甲胎蛋白AFP',
            type: 'line',
            data:  this.imageData6.afp
          }
        ]
      };

      option && myChart.setOption(option);
    },

    calcMargin(index) {
      if (index == 0) {
        return '10px 0px';
      } else {
        return '0px 0px 10px 0px';
      }
    },

  },
}
</script>
<style lang="less" scoped>
.listCon {
  padding-top: 6px;

  .content {
    height: 100%;
    overflow: auto;

    .title {
      line-height: 20px;
      padding: 15px 10px;
      font-size: 13px;
      box-sizing: border-box;
      background: #fff;
      //box-shadow: 0px 3px 9px rgba(27, 93, 213, 0.1);
      border-radius: 5px;
    }

    .item {
      padding: 0 10px 15px;
      background: #fff;
      box-sizing: border-box;
      font-size: 12px;
      //box-shadow: 0px 3px 9px rgba(27, 93, 213, 0.1);
      border-radius: 5px;
      margin: 10px 0;
      min-height: 100px;

      h5 {
        line-height: 40px;
        margin: 0;
        font-size: 14px;
        display: flex;
        align-items: center;

        .icon {
          display: block;
          width: 4px;
          height: 14px;
          background: #337AFA;
          border-radius: 2px;
          margin-right: 5px;
        }
      }

      p {
        text-indent: 2em;
        line-height: 20px;
      }

      .basic {
        width: 100%;
        display: flex;
        flex-wrap: wrap;

      }
    }
  }
}

.update-box {
  width: 270px;
}
.sign-box {
  padding: 10px;
  box-sizing: border-box;
}

.showUpdateWin-btn {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;

  .btn {
    margin: 0 5px;
  }
}

.finish-btn {
  position: absolute;
  right: 0;
  bottom: -8px;

  :last-child {
    color: #fff !important;
  }

  .btn {
    margin: 0 5px;
  }
}
.my-swipe {
  height: 160px;

  .van-swipe-item {
    background-color: #b8bab4;
    text-align: center;

    .swiper-img {
      width: 100%;
      height: 160px;
    }
  }
}

.van-ellipsis {
  color: #9e9e9f;
  height: 32px;
  line-height: 32px;

  span:first-child {
    font-size: 14px;
  }

  span:last-child {
    font-size: 14px;
    color: #504f4f;
  }

  .btn {
    margin: 0 5px;
    width: 40px;
  }

  :last-child {
    color: #fff !important;
    padding-left: 7px;
  }

}

.apply-des {
  width: 300px;
  padding: 5px;

  .title {
    text-align: center;
    font-size: 16px;
    line-height: 40px;
  }

  .des {
    border: 1px solid #f2f2f2;
  }
}

.body_box {
  background-color: #f9f9f9;
  padding: 10px 0;


  .fContentMain {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgb(254, 255, 255);
    color: rgb(51, 51, 51);
    border: 0.1px solid rgb(220, 223, 230);
    border-radius: 6px;
    margin: 10px;
    padding: 10px;

    .contentC {
      display: flex;
      align-items: flex-start;
      background: rgb(255, 255, 255);
      color: rgb(51, 51, 51);
      height: 100%;
      flex-direction: column;
      justify-content: space-between;

      .box-title {
        font-weight: bold;
        margin: 5px 10px;
      }


      .title {
        display: flex;
        width: 100%;
        margin: 5px 10px;


        div:first-child {
          width: 100px;
          color: #878888;
        }

        div:last-child {
          width: calc(100% - 100px);
          //font-weight: 500;
        }

      }
    }

    .contentA {
      display: flex;
      align-items: flex-start;
      background: rgb(255, 255, 255);
      color: rgb(51, 51, 51);
      height: 100%;
      width: 100%;
      flex-direction: column;
      justify-content: space-between;
      position: relative; /* 设置相对定位，以便在伪元素中使用绝对定位 */

      .box-title {
        font-weight: bold;
        margin: 5px 10px;
      }

      .divider {
        width: calc(100% - 20px); /* 减去左右 margin */
        height: 1px;
        background-color: #e0e0e0;
        margin: 5px 10px; /* 与 .title 对齐 */
        position: relative;
      }

      .title {
        display: flex;
        width: 100%;
        margin: 5px 5px;


        div:first-child {
          display: flex;
          align-items: center; /* 垂直居中 */
          //justify-content: center; /* 水平居中 */

          width: 100px;
          //color: #878888;
          margin-right: 20px;
        }

        div:last-child {
          align-items: center; /* 垂直居中 */
          width: calc(100% - 120px);
          //font-weight: 500;
        }

      }
    }

  }

  .firstClass {
    min-height: 120px !important;
  }

  .firstClass_02 {
    min-height: 60px !important;
  }

  .secondClass {
    min-height: 60px !important;
  }


  .head {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    padding: 10px 0px;
    background-color: rgb(254, 255, 255);
    flex-direction: column;

    .picStyle {
      background-image: url('../../../../assets/images/shz.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 50px;
      width: 50px;
    }

    .picStyleNoPass {
      background-image: url('../../../../assets/images/prohibit.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 50px;
      width: 50px;
    }

    .picStyleWait {
      background-image: url('../../../../assets/images/allocate.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 50px;
      width: 50px;
    }

    .picStylePass {
      background-image: url('../../../../assets/images/complete.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 50px;
      width: 50px;
    }

    .f {
      font-size: 20px;
      font-weight: 600;
    }

    .ff {
      font-size: 10px;
      font-weight: 600;
    }
  }
}</style>
